<template>
  <d2-container>
    <div class="pb-2">
      <div><el-button type="warning" @click="addExamination" icon="el-icon-plus">添加考卷</el-button></div>
    </div>
    <div class="flex-1 mx-2 mt-2">
      <el-table :data="examinationList" stripe>
        <el-table-column align="center" label="序号" type="index" width="40" />
        <el-table-column label="考卷名称" prop="examination_name" width="160" />
        <el-table-column align="center" label="试卷图标" prop="cover_icon" width="80">
          <template slot-scope="scope">
            <div style="text-align: center;">
              <img :src="scope.row.icon_image" style="max-width: 80px; max-height: 60px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="试卷封面" prop="cover_image" width="80">
          <template slot-scope="scope">
            <div style="text-align: center;">
              <img :src="scope.row.cover_image" style="max-width: 80px; max-height: 60px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="展示首页" prop="is_home" width="50">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_home"  active-color="#13ce66" inactive-color="#C4C4C4">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否推荐" prop="is_recommend" width="50">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_recommend" active-color="#13ce66" inactive-color="#C4C4C4">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="130">
          <template slot-scope="scope">
            <el-button size="mini" @click="examinationPreview(scope.row.id)">试卷预览</el-button>
            <el-button size="mini" @click="examinationHandleEdit(scope.row.id)">修改</el-button>
            <el-button size="mini" type="danger" @click="examinationOpenDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </d2-container>
</template>

<script>
  import {
    examinationDeleteUrl,
    examinationUpdateUrl,
    examinationCreateUrl,
    examinationDetailUrl,
    examinationListUrl,
  } from '@/utils/answer'
  export default {
    data() {
      return {
        examinationList: [],
      }
    },
    created() {
      this.getExaminationList()
    },
    methods: {
      getExaminationList() {
        this.$get(examinationListUrl).then(res => {
          this.examinationList = res.data.data.list
        })
      },
      addExamination() {
        this.$router.push('/addExamination');
      },
      examinationHandleEdit(examinationId) {
        this.$router.push({
          path: '/addExamination',
          query: {
            examinationId: examinationId
          }
        });
      },
      examinationPreview(examinationId) {
        this.$router.push({
          path: '/examinationPaper',
          query: {
            examinationId: examinationId
          }
        });
      },
      validateHome(e){
        console.log('改变值', e);
      },
      examinationOpenDelete(examinationId){
        this.$confirm('此操作将删除该试卷, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(examinationDeleteUrl + examinationId + '/').then(res=>{
            this.getExaminationList()
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>
</style>
